<template>
  <div class="login">
    <LoginNavBar/>

    <div class="logo">
      <img class="user_img" src="@/assets/images/logo.jpg" alt="">
    </div>


    <div class="container">
      <div class="title">
        <h2 >{{t('Welcome Back')}}</h2>
        <p>{{t('Login back into your account')}}</p>
      </div>
      <div class="form-container">
        <p class="name">{{t('Email')}}</p>
        <van-field v-model="form.username " :border="false"  label="" type="text" :placeholder="t('Email')">
          <template #left-icon>
            <img src="@/assets/images/user.svg" alt="" class="user_img">
          </template>
        </van-field>
        <p class="name">{{t('Password')}}</p>
        <van-field v-model="form.password" :border="false"  label="" type="password" :placeholder="t('Password')">
          <template #left-icon>
            <img src="@/assets/images/password.svg" alt="" class="user_img">
          </template>
        </van-field>
        <p style="text-align: end; margin-top: 5px;" @click="handleForget"> {{t('Forget password? ')}}</p>
        <div class="forget" @click="handleLogin"> {{t('Login')}} </div>
        <p style="text-align: end; margin-top: 10px;" @click="handleRegister"> {{t('Click to Register? ')}}</p>
      </div>
    </div>

    <van-dialog v-model:show="show" title="" show-cancel-button cancelButtonText="Cancel" :showConfirmButton="false">
      <ForgetPassword @close="show = false" />
    </van-dialog>
  </div>
</template>
<script setup>
import LoginNavBar from '@/components/LoginNavBar.vue'
import ForgetPassword from './ForgetPassword.vue'
import { reactive, ref, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showLoadingToast, closeToast  } from 'vant'
import { post } from '@/utils/request'
import 'vant/es/dialog/style'
import { t } from '@/languages'
const form = reactive({
  username : '',
  password: ''
})
const initAPPConfig = inject('initAPPConfig')
const $router = useRouter()

async function handleLogin() {
  if (!form.username  || !form.password) {
    return showToast(t('Cannot be empty'))
  }
  showLoadingToast({
    duration:0
  })
  try {
    const res = await post('/api/app/login/', form)
    localStorage.setItem('exuserInfo', JSON.stringify(res))
    localStorage.setItem('exToken', `JWT ${res.access}`)
    localStorage.setItem('exuserId', res.userId)
    await nextTick()
    initAPPConfig()
    $router.push('/')

    closeToast()
  } catch (error) {
    console.log(error)
  }
}

function handleRegister() {
  $router.push('/register')
}

const show = ref(false)

function handleForget() {
  show.value = true
}

</script>
<style lang="scss" scoped>
.login {
  min-height: 100vh;
  background: url(@/assets/images/Log-in_bg.png);
  background-size: 100% 100%;
}

.logo {
  display: flex;
  justify-content: center;
}

.login .logo img {
  height: 2.66667rem;
}

.login .container {
  padding: 0 1.06667rem;
  margin: 0 .32rem;
  margin-top: .8rem;
}

.login .container .title p {
  margin-top: .13333rem;
}

.login .container .form-container {
  padding-top: .4rem;
}

.login .container .form-container .name {
  margin-top: .53333rem;
  color: #ccc;
  font-size: .37333rem;
}

.login .container .forget {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1.2rem;
  font-weight: 600;
  margin-top: .93333rem;
  color: #0c101a;
  border-radius: .13333rem;
  border: .02667rem solid #325d79;
  background: linear-gradient(90deg, #62f792, #63fddb);
}

.login .container .form-container .user_img {
  width: .66667rem;
}

.login .container .form-container .van-field {
  line-height: 1.17333rem;
  height: .93333rem;
  padding: 0 .26667rem;
  margin-top: .13333rem;
  border-radius: .66667rem;
  border: .02667rem solid #2b4e5a;
  background: #0d111a;
}

.login .container .form-container .van-field :deep(.van-field__left-icon) {
  display: flex;
  align-items: center;
  height: 100%;
}


.login .container .form-container :deep(.van-field__body),
.login .container .form-container :deep(.van-field__control) {
  padding-left: .13333rem;
  height: 100%;
  color: #fff;
}

.login .container {
  :deep(.van-field__control) {
    color: #fff;
    @include setPlaceholder(#666);
  }
}
</style>
